<template>
  <TCollapse title="标签信息">
    <el-form :model="prjDetail" label-width="160px" class="pms-form" size="mini" :inline="true">
      <el-row :gutter="24" style="margin-bottom: 10px">
        <el-col :span="6">
          <el-form-item label="资源资产编码" style="width: 100%" prop="resourceAssetCode">
            <el-input v-model="prjDetail.resourceAssetCode" class="pms-zr-input" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原标签ID" style="width: 100%" prop="oldLabelId">
              <div @click="jump(prjDetail.resourceAssetCode,prjDetail.oldLabelId)">
                  <el-input v-model="prjDetail.oldLabelId" class="jumpRow pms-zr-input" readonly/>
              </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="新标签ID" style="width: 100%" prop="newLabelId" class="jumpRow">
              <div @click="jump(prjDetail.resourceAssetCode,prjDetail.newLabelId)">
                  <el-input v-model="prjDetail.newLabelId" class="pms-zr-input" readonly/>
              </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换签原因" style="width: 100%" prop="reason" required>
              <el-select
                  v-if="isEdit"
                  v-model="prjDetail.reason"
                  size="mini"
                  :popper-append-to-body="false"
              >
                  <el-option
                      v-for="items in selectArray"
                      :key="items.name"
                      :label="items.name"
                      :value="items.name"
                  />
              </el-select>
            <el-input v-model="prjDetail.reason" class="pms-zr-input" :disabled="true" v-else/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 10px">
        <el-col :span="6">
          <el-form-item label="换签人员" style="width: 100%" prop="swapUserId">
            <el-input v-model="prjDetail.swapUserId" class="pms-zr-input" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换签人员所属公司" style="width: 100%" prop="categoryCode">
            <el-input v-model="prjDetail.orgName" class="pms-zr-input" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换签经纬度" style="width: 100%" prop="categoryName">
            <el-input v-model="longLat" class="pms-zr-input" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换签申请时间" style="width: 100%" prop="categoryCode">
            <el-input v-model="prjDetail.createTime" class="pms-zr-input" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 10px">
        <el-col :span="24">
          <el-form-item label="具体情况说明" style="width: 100%" prop="remark">
            <el-input v-model="prjDetail.remark" class="pms-zr-input" :disabled="!isEdit"/>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="display: flex;">
        <div style="width: 160px;text-align: right;color: #606266;padding:10px 10px 0 0">上传图片</div>
        <div style="flex:1;display: flex;flex-wrap: wrap;gap:10px">
            <el-upload
                v-if="isEdit"
                class="upload-file"
                :action="baseUrl + 'pic/uploadFile'"
                :headers="{ sysToken }"
                :auto-upload="true"
                :show-file-list="false"
                :on-success="(res)=>addImage(res)"
                :data="formData"
                accept=".jpg"
            >
                <el-button class="pms-button-primary-plain" style="min-width: 90px !important;height: 25px !important;padding: 0 5px !important;"><i class="el-icon-upload el-icon--right"></i>点击上传</el-button>
            </el-upload>
          <div v-for="(item,index) in getImgUrl(prjDetail.uploadImageList)" :key="index" style="position: relative">
            <el-image
                style="width: 50px; height: 50px;"
                :src="item"
                :preview-src-list="getImgUrl(prjDetail.uploadImageList)">
            </el-image>
            <i class="el-icon-error" style="color: red;position: absolute;right: -5px;top:-5px;cursor: pointer;font-size: 15px" @click="deleteImage(index)" v-if="isEdit"></i>
          </div>
        </div>
      </div>
    </el-form>
  </TCollapse>
</template>

<script>
import {openAssetFull} from "@/api/material";
import $ from "jquery";
import {msgInfoEl} from "@/utils";
export default {
    name: 'LabelInfo',
    props: {
        prjDetail: {
            type: Object,
            default: () => ({})
        },
        isEdit:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            fileList:[],
            url: '',
            token: '',
            userId: '',
            acctId: '',
            selectArray:[
                {
                    key:"2",
                    name:"标签脱落且丢失"
                },
                {
                    key:"3",
                    name:"标签质量问题无法扫码识别"
                },
                {
                    key:"4",
                    name:"标签类型使用有误更换为规范类型"
                },
                {
                    key:"5",
                    name:"质量问题厂家更换实物"
                },
            ],
            formData:{
                docType:"A1102",
                aiRecognitionType:"0",
                supplierUserAccount:"hudf"
            },
            sysToken:'',
            baseUrl:''
        }
    },
    computed:{
        longLat(){
            return this.prjDetail.longitude + ',' + this.prjDetail.latitude;
        }
    },
    created() {
        this.sysToken = window.sessionStorage.getItem('china-tower-token-pms20')
        this.baseUrl = process.env.VUE_APP_JIANGMEN_NEXT_API
        console.log(1111,this.sysToken,this.baseUrl)
    },
    async mounted() {
        const openAssetFullRes = await openAssetFull()
        if (+openAssetFullRes.code === 200) {
            this.url = openAssetFullRes.data.url
            this.token = openAssetFullRes.data.token
            this.userId = openAssetFullRes.data.userId
            this.acctId = openAssetFullRes.data.acctId
        }
    },
    methods:{
        addImage(res){
            console.log(res)
            if(+res.code === 200){
                this.prjDetail.uploadImageList.push(res.data.innerHttpUrl)
            }else{
                return msgInfoEl({
                    type: 'error',
                    message: '上传失败，请重新选择'
                })
            }
        },
        deleteImage(index){
            this.prjDetail.uploadImageList.splice(index, 1)
        },
        getImgUrl(array){
            return array.map((item) => window.location.protocol + "//" + window.location.host + "/pic/pic/openUrl?httpUrl="+ item)
        },
        jump(resourceAssetCode,labelId) {
            const toUrl = `${this.url}ctb_thematic_web/newTowerSkip/assetsRecordNew?res_id=${labelId}&resourceAssetCode=${resourceAssetCode}`
            const params = {}
            params.pwdaToken = this.token
            params.acctId = this.acctId
            params.userName = this.userId
            const newWin = window.open()
            const form = $("<form method='post'></form>")
            form.attr({ action: toUrl })
            $.each(params, function(key, value) {
                const input = $("<input type='hidden' >")
                input.attr({ name: key })
                input.val(value)
                form.append(input)
            })
            form.appendTo(newWin.document.body)
            form.submit()
        },
    }
}
</script>

<style scoped lang="scss">
.jumpRow{
    ::v-deep .el-input__inner{
        color: #53c7f8 !important;
        cursor: pointer !important;
        background-color: #f7f7f7 !important;
    }
}
</style>